<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  <div id="tree"></div>

  <!-- The result should be:
<div id="tree">
<ul>
  <li>Fish
    <ul>
      <li>trout</li>
      <li>salmon</li>
    </ul>
  </li>
  <li>Trees
    <ul>
      <li>Huge
        <ul>
          <li>sequoia</li>
          <li>oak</li>
        </ul>
      </li>
      <li>Flowering
        <ul>
          <li>apple tree</li>
          <li>magnolia</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</div>
-->

  <script>
    let data = {
      "Fish": {
        "trout": {},
        "salmon": {}
      },

      "Tree": {
        "Huge": {
          "sequoia": {},
          "oak": {}
        },
        "Flowering": {
          "apple tree": {},
          "magnolia": {}
        }
      }
    };

    function createTree(container, data) {
      /* your code */
    }

    createTree(document.getElementById('tree'), data);
  </script>

</body>
</html>
